// 这种写法有问题，验证码的handleChange会反复调用
import React, { useState,useEffect,useRef,useCallback,useMemo } from 'react'
import { CapsuleTabs, Form, Input, Button,Checkbox } from 'antd-mobile'
import s from './styleProblem.module.less'
import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'
import Captcha from "react-captcha-code";


export default function Login() {
  const captchaRef = useRef();
  const [visible, setVisible] = useState(false)
  const [activeKey, setActiveKey] = useState(false)
  const [captcha, setCaptcha] = useState('');
  const [boxValue, setBoxValue] = useState(false)
  // const MemoizedCaptcha = React.memo(Captcha);

// 验证码变化，回调方法
  const handleChange = useCallback((newCaptcha) => {
    console.log('captcha', newCaptcha);
    // 只有在验证码发生变化时才更新状态，避免重复更新
    if (newCaptcha !== captcha) {
      // setCaptcha(newCaptcha);
    }
  }, []);  

  // 验证码变化，回调方法
  // const handleChange = useCallback((newCaptcha) => {
  //   console.log('captcha', newCaptcha);
  //     // setCaptcha(newCaptcha);
    
  // }, []);  // 依赖 captcha，只有当 captcha 变化时才更新状态

  const onSubmit = () => {

  }

  const TabContent = ({ isLogin,children  }) => {
    const prefix = isLogin ? 'login' : 'register'; // 根据 tab 确定前缀
    const userIdId = `${prefix}-userId`;  // 动态生成唯一的 id
    const passwordId = `${prefix}-password`;  // 动态生成唯一的 id


    return (
    <>
      <Form
        layout='horizontal'
        footer={
          <Button onClick={onSubmit} block type='submit' color='primary' size='large'>
            提交
          </Button>
        }
      >
        <Form.Item
          name='userId'
          label='用户名'
          rules={[{ required: true, message: '用户名不能为空' }]}
        >
          <Input id={userIdId} autoComplete="username" clearable onChange={(val)=>{console.log(111)}} placeholder='请输入用户名' />
        </Form.Item>
        <Form.Item
          name='password'
          label='密码'
          rules={[{ required: true, message: '密码不能为空' }]}
          extra={
            <div className={s.eye}>
              {!visible ? (
                <EyeInvisibleOutline onClick={() => setVisible(true)} />
              ) : (
                <EyeOutline onClick={() => setVisible(false)} />
              )}
            </div>
          }
        >
          <Input id={passwordId} autoComplete="current-password" clearable onChange={console.log} placeholder='请输入密码' type={visible ? 'text' : 'password'} />
        </Form.Item>
        {!isLogin&&children}
        
    
      </Form>
    </>
  );
  }



  return <div className={s.auth}>
    <div className={s.head}>
      <div className={s.head} />

    </div>
    <div className={s.form}>
      <CapsuleTabs onChange={(key) => { setActiveKey(key) }}>
        <CapsuleTabs.Tab title='登录' key='fruits'>
          <TabContent isLogin={true} />
        </CapsuleTabs.Tab>
        <CapsuleTabs.Tab title='注册' key='vegetables'>
          <TabContent isLogin={false} >
            <Form.Item
              name='verify'
              label='验证码'
              rules={[{ required: true, message: '验证码不能为空' }]}
              extra={
                 // 只在需要时才渲染
                <Captcha ref={captchaRef} charNum={4} onChange={handleChange} />
              }
            >
              <Input  autoComplete="current-password" clearable onChange={console.log} placeholder='请输入密码' type={visible ? 'text' : 'password'} />
             
            </Form.Item>
            
            <Form.Item
              name='label'
              label=''
            >
              <Checkbox onChange={(key) => { setBoxValue(key) }}>阅读并同意<a>《掘掘手札条款》</a></Checkbox>
            </Form.Item>
          </TabContent>
          
            
        </CapsuleTabs.Tab>

      </CapsuleTabs>
      
    </div>

     
    
  </div>
}